// 模拟vue.js文件
// 初始化工作
// 1. 代理数据：把data的数据挂载到vm上，同时设置get/set
// 2. 数据劫持：为data的属性提供get/set,同时更新DOM元素
// 3. 编译模板：处理视图中的DOM
// 3.1 如el中的子节点的{{}}
// 3.2 如el中的子节点的指令属性



function Vue(options) {
  this.$options = options
  this.$data = options.data || {}
  // el的值可以是DOM元素，也可以是字符串
  const el = options.el
  this.$el = typeof el === 'string' ? document.querySelector(el) : el

  // 1. 代理数据：把data的数据挂载到vm上，同时设置get/set
  this.proxyData()

  // 2. 数据劫持：为data的属性提供get/set,同时更新DOM元素
  // 第一种方法 直接写
  // 第二种方法 原型方法
  // 第三种方法 利用构造函数

  new Observer(this.$data)

  // 3. 编译模板
  new Compiler(this)
}

Vue.prototype.proxyData = function() {
  // 把对象的的key放到数组
  Object.keys(this.$data).forEach(key => {
    Object.defineProperty(this,key,{
      enumerable: true,
      configurable: false,
      get() {
        return this.$data[key]
      },
      set(value) {
        if(value === this.$data[key]) return 
        this.$data[key] = value
      }
    })
  })
  
}